<template>
  <q-page class="">
    <div class="q-pa-md absolute full-width full-height column">

      <div class="row content-stretch">
        <q-input v-model="关键词" outlined label="搜索……" class="col" @keyup.esc="关键词 = ''">
          <template v-slot:append>
            <q-icon v-if="关键词 !== ''" name="close" @click="关键词 = ''" class="cursor-pointer" />
            <q-icon name="search" />
          </template>
        </q-input>
        <q-select outlined v-model="排序字段" :options="排序字段列表" label="排序依据" class="col-2" />
        <q-checkbox v-model="倒序" label="倒序" checked-icon="task_alt" unchecked-icon="highlight_off" class="col-1" />
      </div>

      <h6 v-show="关键词 && !todos_未完成.length && !todos_已完成.length" class="text-negative">没有匹配项目……</h6>

      <q-scroll-area  列表主体内容 class=" 撑开">
        <div class="q-gutter-md q-mb-xl q-pb-xl">
          <transition appear enter-active-class="animated zoomIn" leave-active-class="animated zoomOut absolute-top">
            <q-banner class="bg-grey-3" v-show="!todos_未完成.length && !关键词" rounded>
              <template v-slot:avatar>
                <q-icon name="check" color="primary" />
              </template>
              幸得太平无一事~~
              <template v-slot:action>
                <q-btn flat color="primary" label="添加一项" @click="add1" />
              </template>
            </q-banner>
          </transition>
          <todo列表子项 :todos子项="todos_未完成" 标题="未完成"> </todo列表子项>
          <todo列表子项 :todos子项="todos_已完成" 标题="已完成" />
        </div>
      </q-scroll-area>


      <div 底部按钮 class="absolute-bottom text-center q-mb-lg no-pointer-events">
        <q-btn round size="24px" icon="add" color="primary" @click="add1" class="all-pointer-events">

        </q-btn>
      </div>

      <q-dialog v-model="显示详情" persistent>
        <todo详情 />
      </q-dialog>
    </div>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'

import { useTodo } from './todo-store'
const store = useTodo()
const { delete1, edit1, add1 } = store
const { todos_未完成, todos_已完成, 显示详情, 关键词, 排序字段, 排序字段列表, 倒序 } = storeToRefs(store)


import todo详情 from './todo详情.vue'
import todo列表子项 from './todo列表子项.vue'


</script>
